<template>
  <div class="flex tp-bg no-select">
    <div class="bg-title">分布式光伏数字化平台</div>
    <div class="f-title flex-between">
      <div class="flex">
        <div
          v-cloak
          class="calendar icon icon-calendar"
        >
          {{ dateTimeWeather.date }}
        </div>
        <div class="clock icon icon-clock">{{ dateTimeWeather.time }}</div>
        <div
          v-cloak
          :class="['icon', 'icon-' + useWeatherIcon(weatherTemperature.weather as never)]"
        >
          {{ weatherTemperature.weather }}&nbsp;&nbsp;{{ weatherTemperature.temperature }}℃
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { IWeather } from '@/types/weather'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import moment from 'moment'
import { reactive, onUnmounted } from 'vue'
import { useWeatherIcon } from '@/compoase/useWeatherIcon'
// 左侧日期、时间、天气
const dateTimeWeather = reactive({
  date: moment().format('YYYY-MM-DD'),
  time: moment().format('HH:mm:ss')
})
const timer = setInterval(() => {
  dateTimeWeather.date = moment().format('YYYY-MM-DD')
  dateTimeWeather.time = moment().format('HH:mm:ss')
}, 1000)

// 定位 天气
const key = '66186cf37c7451bdbe20f2d1400818ea'
const weatherTemperature = reactive<IWeather>({
  weather: '--',
  temperature: '--'
})
const getWeather = (adcode: string) => {
  axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?city=${adcode}&key=${key}`)
    .then(({ data }) => {
      const { status, info, lives } = data
      if (status !== '1') return ElMessage.error(info)
      const { weather, temperature } = lives[0]
      weatherTemperature.temperature = temperature
      weatherTemperature.weather = weather
    })
    .catch(err => {
      ElMessage.error(err.toString())
    })
}
const getUserGeolocation = (location: string) => {
  axios.get(`https://restapi.amap.com/v3/geocode/regeo?output=json&location=${location}&key=${key}&radius=1000&extensions=all`)
    .then(({ data }) => {
      const { status, info, regeocode } = data
      if (status !== '1') return ElMessage.error(info)
      const { addressComponent: { adcode } } = regeocode
      getWeather(adcode)
    })
    .catch(err => {
      ElMessage.error(err.toString())
    })
}
const transformCoordinate = (latitude: number, longitude:number) => {
  axios.get(`https://restapi.amap.com/v3/assistant/coordinate/convert?locations=${longitude},${latitude}&coordsys=baidu&output=json&key=${key}`)
    .then(({ data }) => {
      const { status, info, locations } = data
      if (status !== '1') return ElMessage.error(info)
      getUserGeolocation(locations)
    })
    .catch(err => {
      ElMessage.error(err.toString())
    })
}
const getCoordinate = () => {
  const geo = new (window as any).BMapGL.Geolocation()
  geo.getCurrentPosition((res: any) => {
    // console.log('res:', res)
    if (!res || !res.latitude) return ElMessage.error('定位失败')
    transformCoordinate(res.latitude, res.longitude)
  }, {
    enableHighAccuracy: true,
    maximumAge: 0
  })
}
getCoordinate()
const timer2 = setInterval(() => {
  getCoordinate()
}, 1000 * 60 * 60)

window.addEventListener('beforeunload', () => {
  if(timer) clearInterval(timer)
  if(timer2) clearInterval(timer2)
})
onUnmounted(() => {
  if(timer) clearInterval(timer)
  if(timer2) clearInterval(timer2)
})
</script>

<style lang="scss" scoped>
$bg: #0e263d;
$color: #e6e6e7;
$icon_color: #29f1fa;
.logo {
  width: 21.6rem;
  height: 6.8rem;
  display: flex;
  align-items: flex-end;
  & > img {
    // display: flex-end;
    height: 5rem;
    margin-bottom: 0.1rem;
  }
}
.tp-bg {
  background-color: $bg;
  color: $color;
  position: relative;
  padding-bottom: 1rem;
}
.bg-title {
  background: url(@imgs/top_title.png) 0 0 no-repeat;
  background-size: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  top: 1.5rem;
  margin: auto;
  text-align: center;
  font-family: PangMenZhengDao-Regular, PangMenZhengDao;
  font-weight: 400;
  color: $icon_color;
  font-size: 2.4rem;
}
.f-title {
  flex: 1;
  margin-top: 1.5rem;
  line-height: 5.3rem;
  .icon {
    position: relative;
    padding-left: 2.3rem;
    margin-left: 1.5rem;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 1.8rem;
      height: 1.8rem;
    }
  }
  .icon-calendar::before {
    background: url(@imgs/calendar-2-fill@2x.png) 0 0 no-repeat;
    background-size: 100%;
  }
  .icon-clock::before {
    background: url(@imgs/clock@2x.png) 0 0 no-repeat;
    background-size: 100%;
    width: 1.6rem;
  }
  .icon-sunny::before {
  //   // background: url(@imgs/sunny@2x.png) 0 0 no-repeat;
    background: url(@imgs/weather.png) 0 0 no-repeat;
    background-size: 509px 190px;
    background-position: -32px -15px;
    width: 20px;
    height: 20px;
  }
  .icon-sunny-to-cloudy::before {
    background: url(@imgs/weather.png) 0 0 no-repeat;
    background-size: 509px 190px;
    background-position: -34.83px -47.83px;
    width: 18.33px;
    height: 17.5px;
  }
  .icon-cloudy::before {
    background: url(@imgs/weather.png) 0 0 no-repeat;
    background-size: 509px 190px;
    background-position: -34px -79px;
    width: 20px;
    height: 20px;
  }
  .icon-thunderstorm::before {
    background: url(@imgs/weather.png) 0 0 no-repeat;
    background-size: 509px 190px;
    background-position: -34px -145px;
    width: 20px;
    height: 20px;
  }
  .icon-rainstorm::before {
    background: url(@imgs/weather.png) 0 0 no-repeat;
    background-size: 509px 190px;
    background-position: -131px -112px;
    width: 20px;
    height: 20px;
  }
  .icon-mid-rain::before {
    background: url(@imgs/weather.png) 0 0 no-repeat;
    background-size: 509px 190px;
    background-position: -242px -116px;
    width: 20px;
    height: 20px;
  }
  .icon-light-rain::before {
    background: url(@imgs/weather.png) 0 0 no-repeat;
    background-size: 509px 190px;
    background-position: -322px -116px;
    width: 20px;
    height: 20px;
  }
  .icon-heavy-fog::before {
    background: url(@imgs/weather.png) 0 0 no-repeat;
    background-size: 509px 190px;
    background-position: -131px -147px;
    width: 20px;
    height: 20px;
  }
  .icon-mist::before {
    background: url(@imgs/weather.png) 0 0 no-repeat;
    background-size: 509px 190px;
    background-position: -225px -148px;
    width: 20px;
    height: 20px;
  }
  .icon-snow::before {
    background: url(@imgs/weather.png) 0 0 no-repeat;
    background-size: 509px 190px;
    background-position: -406px -25px;
    width: 20px;
    height: 20px;
  }
  .icon-gale::before {
    background: url(@imgs/weather.png) 0 0 no-repeat;
    background-size: 509px 190px;
    background-position: -406px -59px;
    width: 20px;
    height: 20px;
  }
  .icon-cyclone::before {
    background: url(@imgs/weather.png) 0 0 no-repeat;
    background-size: 509px 190px;
    background-position: -406px -89px;
    width: 20px;
    height: 20px;
  }
  .icon-gps::before {
    background: url(@imgs/GPS@2x.png) 0 0 no-repeat;
    background-size: 100%;
  }
}
.img {
  & > img {
    width: 1.8rem;
    height: 1.8rem;
    cursor: pointer;
    z-index: 100;
  }
}
:deep(.el-dropdown) {
  line-height: 5.3rem;
  color: $color;
  outline: none;
  border: none;
  z-index: 100;
  cursor: pointer;
  &:hover {
    outline: none;
    border: none;
  }
}
.el-dropdown-link {
  position: relative;
  padding-left: 2rem;
  outline: none;
  border: none;
  &:hover {
    outline: none;
    border: none;
  }
  &::before {
    content: '';
    background: url(@imgs/user@2x.png) 0 0 no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 1.6rem;
    height: 1.6rem;
  }
}
.popper {
  background-color: $bg;
  color: $color;
}
:deep(.el-dropdown-menu__item) {
  color: $color;
}
</style>
